<template>
    <div>
        <el-container>
            <el-aside width="300px">
                <el-select v-model="value" clearable filterable placeholder="请输入或者选择学生姓名">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-aside>
            <el-main>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                        <el-form :inline="true" :model="formInline" size="medium" disabled class="demo-form-inline"
                            label-width="80px" label-position="right">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="所属院系:">
                                        <el-input v-model="formInline.faculty"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="学生姓名:">
                                        <el-input v-model="formInline.userName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="性别">
                                        <el-input v-model="formInline.sex"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="身份证号">
                                        <el-input v-model="formInline.idNumber"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="学号">
                                        <el-input v-model="formInline.studentId"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="专业">
                                        <el-input v-model="formInline.specialty"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="年级">
                                        <el-input v-model="formInline.grade"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="联系电话">
                                        <el-input v-model="formInline.contactNumber"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">

                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="预约记录" name="second">配置管理</el-tab-pane>
                    <el-tab-pane label="违约记录" name="third">角色管理</el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>


<script>
export default {
    watch: {

    },

    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },

    data() {
        return {
            // 获取到的个人信息
            formInline: {
                // 院系
                faculty: '医学系',
                // 学生姓名
                userName: '王强',
                sex: '男',
                // 身份证号
                idNumber: '610589911245452584',
                // 学号
                studentId: '89568956',
                specialty: '护理',
                // 年级
                grade: '17级',
                // 联系电话
                contactNumber: '13589569856'
            },
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            activeName: 'first',

        };
    }
};
</script>

<style lang="less" scoped></style>